<template>
  <div class="hqinpnt">
    <div :class="['hqinpnt_box',selectParam.length==0 &&'posad']">
      <div class="hqinpnt_left">
        <div v-for="( inputItem , index ) in selectParam" :key="index" class="inputItemCss">
          <span class="filter-title"> {{ inputItem.label }}</span>
          <el-input
            :key="index"
            v-model.trim="searchData[index]"
            clearable
            :placeholder="placeholder + inputItem.label"
            class="isSearchAll"
            @clear="searchFun()"
            @keyup.enter.native="searchFun"
          >
            <!-- 搜索 -->
            <el-button slot="append" class="inputIcon" @click="searchFun">
              <svg-icon icon-class="hqsearch" />
            </el-button>
          </el-input>
        </div>
      </div>
      <div class="hqinpnt_right">
        <div v-for="( inputItem , index ) in selectParams" :key="index" class="inputItemCss">
          <span class="filter-title"> {{ inputItem.label }}</span>
          <el-input
            :key="index"
            v-model.trim="searchDataUser[index]"
            clearable
            :placeholder="placeholder + inputItem.label"
            class="isSearchAll"
            @clear="searchFun()"
            @keyup.enter.native="searchFun"
          >
            <!-- 搜索 -->
            <el-button slot="append" class="inputIcon" @click="searchFun">
              <svg-icon icon-class="hqsearch" />
            </el-button>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchSelect',
  props: {
    /**
    * 提示文字
    */
    placeholder: {
      type: String,
      default() {
        return '请输入'
      }
    },
    /**
    * 使用clearable属性即可得到一个可清空的输入框
    */
    clearable: {
      type: Boolean,
      default() {
        return false
      }
    },
    /**
    * 下拉选择的文字
    */
    selectOpts: {
      type: Array,
      default() {
        return [{
          label: '错误',
          value: 'error',
          position: ''
        }]
      }
    }

  },
  data() {
    return {
      // 右边的字段
      searchDataUser: [],
      // 左边的
      searchData: []
    }
  },
  computed: {
    selectParam: function() {
      return this.selectOpts.filter(user => !user.rigth)
    },
    selectParams: function() {
      return this.selectOpts.filter(user => user.rigth)
    }
  },
  methods: {
    /**
     * 获取数据
     */
    searchFun(type) {
      let obj = []
      obj = this.searchData.map((v, n) => {
        return JSON.parse(`{"${this.selectParam[n].value}":"${v}"}`)
      })
      // 右边的
      let objs = []
      objs = this.searchDataUser.map((v, n) => {
        return JSON.parse(`{"${this.selectParams[n].value}":"${v}"}`)
      })
      this.$emit('click', Object.assign({}, ...obj, ...objs), type)
    }

  }
}
</script>

<style lang="scss" scoped>
$activeColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.hqinpnt {
  .hqinpnt_box {
    display: flex;
    justify-content: space-between;
    &.posad{
      position: absolute;
    right: 0;
    }
    .hqinpnt_left {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
    }

    .inputItemCss {
      background-color: #F8F7FB;
      border: none;
      border-radius: 24px;
      margin-right: 22px;
      margin-bottom: 15px;
      height: 50px;
    }

    .isSearchAll {
      width: 200px;
      height: 48px;

      ::v-deep .el-input__inner {
        height: 100%;
        background-color: #F8F7FB;
        border: none;
      }

      ::v-deep .el-input__icon {
        line-height: normal;
      }

      ::v-deep .el-input {
        height: 100%;
      }

      ::v-deep .el-input-group__append {
        border: 0;
        border-radius: 0px 24px 24px 0px;
      }

      ::v-deep .el-input-group__prepend {
        border: 0;
      }

      .inputIcon {
        height: 48px;
        width: 53px;
        margin: 0px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0px 24px 24px 0px;
        cursor: pointer;
        svg {
          font-size: 20px;
          position: absolute;
          left: 14px;
          top: 14px;
          color: $mainColor;
        }
      }
    }
  }
.hqinpnt_right{
  display: inline-flex;
}
  .filter-title {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 10px;
    color: #14162E;
    vertical-align: middle;

    &::after {
      content: '|';
      padding-left: 15px;
      color: #c0c4cc;
    }
  }
}
</style>

